<template>
	<view>
		<view class="">
			<!-- 添加分享海报 -->
			<view
				style="display: flex;width: 700rpx;background-color: white;border-radius: 20rpx;margin: 20rpx auto;align-items: center;height: 120rpx;"
				@click="tolunbotu()">
				<uni-icons style="margin-left: 35rpx;margin-right: 20rpx;" type="plusempty" size="20"></uni-icons>
				添加分享海报！
			</view>
			<view
				style="display: flex; overflow: hidden;flex-wrap: wrap; width: 690rpx; margin: 20rpx auto 5rpx auto;justify-content: space-between;">
				<view v-for="(item,index) in bannerlists" :key="index" @click="tolunbotu(item)">
					<image style="width: 320rpx;" :src="item.url" mode="widthFix"></image>
				</view>
			</view>

		</view>
		<!-- 下面是点 添加分享海报使用 -->
		<model v-if='show1' @colseModel='show1 = false'>
			<view style="display:flex;padding: 40rpx;flex-direction: column;">
				<view style="display: flex;flex: 3;justify-content: center;font-weight: 700;">
					分享海报设置
				</view>
			</view>
			<view style="display: flex;flex-direction: column;">
				<view style="margin-bottom: 20rpx;">
					请选择图片
				</view>
				<view v-if="show2 && shu4 "
					style="display: flex;flex-direction: row; width:400rpx;height: 160rpx;border-style: solid; border-width: 5rpx;border-color:#c2c2c2; border-radius: 20rpx;">
					<image style="display: flex;width:400rpx;height: 160rpx;" :src="shu3" mode="aspectFit"></image>
					<view style="display: flex;margin: 5rpx 0 0 -45rpx;" @click="delpic(shu3)">
						<!-- <uni-icons style="font-size: 60rpx;color: #7F7F7F;" type="clear"></uni-icons> -->
					</view>
				</view>
				<view style="display: flex;justify-content: center;">
					<uni-file-picker v-if="show3 || !shu4" limit="1" v-model="shu6" :del-icon="true" mode="grid"
						return-type="object" :imageStyles="imageStyles" file-mediatype="image" @success="fanhuiurl"
						@delete="delpic"></uni-file-picker>
				</view>
			</view>
			<view style="display: flex;margin:30rpx 0 20rpx 0;">标题</view>
			<input style="padding: 15rpx 25rpx; border-radius: 9rpx;box-shadow: 1px 1px 5px #c2c2c2;" type="text"
				v-model="shu2" focus placeholder="请输入分享海报标题">
			<view style="display: flex;flex-direction: row;margin-top: 80rpx;justify-content: center;">
				<view
					style="display: flex;width: 120rpx;border-radius: 15rpx;background-color: blue;color: white;justify-content: center;align-items: center;padding: 10rpx;"
					@click="tijiao_sharehaibao">
					{{shu4?'修改':'提交'}}
				</view>
				<view
					style="display: flex;width: 120rpx;border-radius: 15rpx;background-color: blue;color: white;justify-content: center;align-items: center;margin-left: 60rpx;padding: 10rpx;"
					@click="show1 = false">
					返回
				</view>
			</view>
			<view v-if="xinyunxin_userinfo.permission.indexOf('del_lunbotu')!=-1"
				style="display: flex;color: dodgerred;margin-top: 50rpx;justify-content: center;"
				@click="del_sharehaibao(shu5)">
				删除本张分享海报
			</view>
		</model>
	</view>
</template>

<script>
	import getDateTime from '@/common/getdateTime.js';
	import model from '../../components/model.vue'
	export default {
		components: {
			model
		},
		data() {
			return {
				imageStyles: {
					width: 200,
					height: 80,
					border: {
						radius: '20rpx'
					}
				},
				bannerlists: [],
				show1: false, //添加分享海报时弹窗
				show2: true, //修改分享海报时，图片是否显示
				show3: false, //修改分享海报时，图片上传窗口是否显示
				shu2: '', //分享海报的标题 
				shu3: '', //分享海报片地址
				shu4: '', //判断修改还是提交临时用
				shu5: '', //分享海报片的ID
				shu6: [],
			}
		},
		async onLoad() {
			this.xinyunxin_userinfo = await uniCloud.getCurrentUserInfo()
			this.get_sharehaibao()
		},
		methods: {
			//删除图片
			delpic() {
				uni.showLoading({
					title: "删除中……",
					mask: true
				})
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 0,
						picurl: this.shu3
					}
				}).then(res => {
					uni.hideLoading()
					this.shu6 = []
					this.show2 = false
					this.show3 = true
				})
			},
			//点分享海报修改时
			// tupian(){
			// 	this.show2=false
			// 	this.show3=true
			// },
			// 上传成功
			fanhuiurl(e) {
				this.shu3 = e.tempFiles[0].fileID
				// this.zhaopian=e.tempFiles[0].fileID
			},
			//获取分享海报
			get_sharehaibao() {
				uni.showLoading({
					mask: true,
					title: "加载中……"
				})
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 13, //获取
					}
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					// res.result.res.data存在就赋值
					if (res.result.data.length) {
						this.bannerlists = res.result.data
					}
				})
			},
			//提交或修改分享海报
			tijiao_sharehaibao() {
				uni.showLoading({
					title: "分享海报数据处理中……",
					mask: true
				})
				if (this.shu4) {
					if (!this.shu3 || !this.shu2) {
						uni.showToast({
							title: '请填好各项且上传图片再试',
							icon: 'none',
							duration: 1000
						})
						uni.hideLoading()
						return
					}
				} else {
					if ( !this.shu2 || !this.shu6) {
						uni.showToast({
							title: '请填好各项且上传图片再试',
							icon: 'none',
							duration: 1000
						})
						uni.hideLoading()
						return
					}
				}
				this.show1 = false
				if (this.shu4) {
					uniCloud.callFunction({
						name: "delpic",
						data: {
							leixing: 15, //修改
							shuju:{
								time: getDateTime.dateTimeStr('y-m-d h:i:s'),
								biaoti: this.shu2,
								url: this.shu3 ? this.shu3 : this.shu6
							},
							tiaojian:{
								_id: this.shu5
							}
						}
					}).then(res => {
						this.shu2 = this.shu3 = this.shu4 = this.shu5 = this.shu6 = ''
						uni.hideLoading()
					})
				} else {
					uniCloud.callFunction({
						name: "delpic",
						data: {
							leixing: 14, //提交
							shuju:{
								time: getDateTime.dateTimeStr('y-m-d h:i:s'),
								biaoti: this.shu2,
								url: this.shu3
							}
						}
					}).then(res => {
						uni.hideLoading()
					})
				}
				setTimeout(() => {
					this.get_sharehaibao()
				}, 500)
			},
			//点击进入修改页面
			tolunbotu(e) {
				this.shu2 = this.shu3 = this.shu4 = this.shu5 = this.shu6 = ''
				if (e) {
					this.shu4 = e.url
					this.shu3 = e.url
					this.shu2 = e.biaoti
					this.shu5 = e._id
				}
				this.show1 = true
			},
			//删除本张分享海报
			del_sharehaibao() {
				uni.showLoading({
					title: "删除中……",
					mask: true
				})
				this.show1 = false
				//删除图片文件 
				uniCloud.callFunction({
					name: "delpic",
					data: {
						picurl: this.shu3,
						leixing: 0, //删除头像
					}
				}).then(res => {})
				//删除本条记录
				uniCloud.callFunction({
					name: "delpic",
					data: {
						tiaojian:{
							_id: this.shu5,
						},
						leixing: 16
					}
				}).then(res => {})
				setTimeout(() => {
					this.get_sharehaibao()
					uni.hideLoading()
				}, 500)
			},
		}
	}
</script>

<style>

</style>